.button-variant(@color; @background; @border) {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  white-space: nowrap;
  .button-size(@btn-padding-base; @font-size-base; @line-height-base; @btn-border-radius);
  .user-select(none);
  color: @color;
  background-color: @background;
  border-color: @border;
  .transition();

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }

  &:focus,
  &.focus {
    color: @color;
    // background-color: darken(@background, 10%);
    border-color: darken(@border, 7%);
    text-decoration: none;
  }
  &:hover {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
    text-decoration: none;
  }
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);

    &:hover,
    // &:focus,
    &.focus {
      color: @color;
      background-color: darken(@background, 17%);
          border-color: darken(@border, 25%);
    }
  }
  &:active,
  &.active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.focus {
      cursor: not-allowed;
      color: @btn-disable-color;
      background-color: @btn-disable-bg;
      border-color: @btn-disable-border;
      .opacity(.65);
      .box-shadow(none);
    }
  }
}

// Button sizes
.button-size(@padding; @font-size; @line-height; @border-radius) {
  padding: @padding;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}


// 其他按钮
.btn-styles() {
  width: @btn-icon-width;
  height: @btn-icon-width;
  line-height: @btn-icon-width;
  border-radius: @btn-icon-radius;
  display: inline-block;
  text-align: center;
  .btn-defined(@btn-icon-color, @btn-icon-bg, 
              @btn-icon-color-hover, @btn-icon-bg-hover, 
              @btn-icon-color-active, @btn-icon-bg-active,
              @btn-icon-color-disabled, @btn-icon-bg-disabled);

}

.btn-defined(@clo:none, @bg:none, @hclo:none, @hbg:none, @aclo:none, @abg:none, @dclo:none, @dbg:none) {
  color: @clo;
  background: @bg;
  cursor: pointer;
  .user-select(none);
  .transition();

  &:hover, &:focus  {
  color: @hclo;
  background: @hbg;
  }

  &:active, &.active {
  color: @aclo;
  background: @abg;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &, &:hover, &:focus, &.focus, &:active, &.active {
      color: @dclo;
      background: @dbg;
      cursor: not-allowed;
    }
  }
}


.btn-3d(@color) {
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: inset 0 0.3rem 0.2rem rgba(255, 255, 255, 0.2), inset 0 -0.3rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  border: none;
  text-shadow: 0 0.05rem rgba(0, 0, 0, 0.8), 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2), 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.2);
  .button-size(@btn-padding-base; @font-size-base; @line-height-base; @btn-border-radius);
  .user-select(none);
  background: @color;

  &:hover  {
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000');
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.5)));
    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  }

  &:active, &.active {
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &, &:hover, &:focus, &.focus, &:active, &.active {
      cursor: not-allowed;
      color: @btn-disable-color;
      background-color: @btn-disable-bg;
      background-image: none;
      text-shadow: none;
      box-shadow: none;
      transform: scale(1);
    }
  }
}